<template>
  <div><!--用户列表页面-->
    <h2 style="text-align: left;width: 100%">用户列表</h2><hr>
    <h4 style="text-align: left;width: 100%">查询条件</h4>
    <div class="grid-content bg-purple-dark" align="left">
      <el-form ref="formLoad" :inline="true" class="demo-form-inline" :model="formLoad" >
        <el-form-item label="账号:" prop="account">
          <el-input v-model="formLoad.account" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称:" prop="username">
          <el-input v-model="formLoad.username" placeholder="请输入相关昵称"></el-input>
        </el-form-item>
        <el-form-item >
        <span class="demonstration">注册日期：</span>
        <el-date-picker
          v-model="formLoad.times"
          format="yyyy年MM月dd日HH时mm分ss秒"
          value-format="yyyy-MM-dd HH:mm:ss"
          :clearable="false"
          type="datetimerange"

          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="setTime">
        </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="onReset()">重置</el-button>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <h4 style="text-align: left;width: 100%">账号管理</h4>
    <el-row>
      <el-col :span="24">
        <div align="left">
          <el-button type="primary" icon="el-icon-error" @click="centerDialogVisible = true">封禁</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="deleteMul()">批量删除</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
ref="mt" :data="datas" tooltip-effect="dark" style="width: 100%"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection" prop="id" width="55">
          </el-table-column>
          <el-table-column prop="id" label="用户ID">
          </el-table-column>
          <el-table-column prop="account" label="用户账号">
          </el-table-column>
          <el-table-column prop="username" label="用户昵称">
          </el-table-column>
          <el-table-column prop="createdTime" label="注册日期" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="operation" label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="warning"  @click="details(scope.$index, datas)">查看详情</el-button>
              <el-button type="danger" @click.native.prevent="deleteRow(scope.$index, datas)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
:current-page="currentPage" :page-sizes="[5, 10, 15, 20]"
                         :page-size="5" background="blue" layout="total, sizes, prev, pager, next, jumper"
                         :total="totalRows"
                         @size-change="handleSizeChange" @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <!--封禁用户弹窗-->
    <el-dialog
      title="账号封禁"
      :visible.sync="centerDialogVisible"
      width="30%"
      align="left" >
      <span>账号：</span><br>
      <el-radio-group v-model="radio">
        <el-radio :label="3">临时封禁</el-radio>
        <el-radio :label="6">永久封禁</el-radio>
      </el-radio-group><br>
      <el-button @click="centerDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="centerDialogVisible = false,banned()">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>

  import {getList,getdetailst} from '@/api/management';
export default {
  name: "UserList",
  data(){
    return{
      centerDialogVisible: false,
      multipleSelection: [],
      formLoad: {
        account: '',
        username: '',

          startTime: '',
          endTime: '',

        pageNumber:1,
        pageSize:5
      },
      datas:[],
      totalRows: '',
      currentPage: 1,
      currentSize: 5,

    }

  },
  created() {
   this.getInfoList();
  },

  methods: {
    /*查看个人资料详情*/
    async getdetailst() {

    },
  /*  /!*封禁用户*!/
    banned: function () {
      this.axios.post('', {
        numbers: this.form.numbers,
        units: this.form.units,
        remarks: this.form.remarks

      })
        .then(res => {
          if (res.data.code === 19000) {
            this.load();
            this.$message({
              type: 'success',
              message: '新增成功一条数据!'
            });
          } else {
            this.$message({
              type: 'warn',
              message: '系统繁忙,请稍后重试!'
            });
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消新增'
          });
        });
    },
*/
   /* 初始化查询方法*/
    async getInfoList() {
      const res = await getList(this.formLoad)
      if (res.code == 200) {
        console.log(res)
        this.datas = res.data.records;
        this.totalRows=res.data.total;

      }
    },
    setTime(picker){
      this.formLoad.startTime=picker[0];
      this.formLoad.endTime=picker[1];
    },

    onReset:function(){
      this.$refs.formLoad.resetFields();
    },

    onSubmit: function () {
   this.getInfoList();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.load();
    },
    handleSizeChange(val) {
      this.currentSize = val;

      this.getInfoList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;

     this.getInfoList();
    }
  }
  }
</script>

<style scoped>

</style>
